<#include "/WEB-INF/views/admin/common/layout/__formlayout.html">
<#assign pageCss>
<link rel="stylesheet" href="${ctx}/resource/cropper/amazeui.cropper.css">
<style type="text/css">
.img-container {
    margin-bottom: 10px;
    width: 300px;
    height: 300px;
    max-width: 300px;
    max-height: 300px;
    border: 1px solid #ccc;
}
</style>
</#assign>
<#assign pageScript>
<script type="text/javascript" src="${ctx}/resource/cropper/cropper.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	// 初始化
    var $image = $('#image');
    $image.cropper({
        aspectRatio: '1',
        preview: '.img-preview',
        zoomOnWheel: false,
    })

    var avatarData 
    // 事件代理绑定事件
    $('.docs-buttons').on('click', '[data-method]', function() {
        var $this = $(this);
        var data = $this.data();
        var result = $image.cropper(data.method, data.option, data.secondOption);
        switch (data.method) {
            case 'getCroppedCanvas'://裁剪图片
	            if (result) {
	            	//获取base64 result.toDataURL('image/jpeg')
	            	avatarData = result.toDataURL('image/jpeg');
	            	layer.msg("裁剪完成", {
						icon : 1,
						time : 1000
					});
	            }
            break;
            case 'uploadAvatar': //上传图片
            	if (avatarData) {
                	//result.toDataURL('image/jpeg')//获取base64 上传
            		$.ajax({
           			   type: "POST",
           			   url: "${ctx!}/admin/sys/user/avatar_update",
           			   data: {"data":avatarData},
           			   success: function(result){
           				if (result.isSuccess) {
    						layer.msg(result.msg, {
    							icon : 1,
    							time : 1000,
    							end : function() {
    								//信息提示完成后关闭表单窗口
    								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    								parent.layer.close(index); //再执行关闭  
    							}
    						});
    					} else {
    						layer.msg(result.msg, {
    							time : 1000,
    							icon : 2
    						});
    					}
           			   }
           			});
                }else{
                	layer.msg("请选对您选择的图片进行裁剪", {
						time : 1000,
						icon : 2
					});
                }
            break;
        }
    })

    // 上传图片
    var $inputImage = $('#inputImage');
    var URL = window.URL || window.webkitURL;
    var blobURL;

    if (URL) {
        $inputImage.change(function () {
            var files = this.files;
            var file;

            if (files && files.length) {
               file = files[0];

               if (/^image\/\w+$/.test(file.type)) {
                    blobURL = URL.createObjectURL(file);
                    $image.one('built.cropper', function () {
                        // Revoke when load complete
                       URL.revokeObjectURL(blobURL);
                    }).cropper('reset').cropper('replace', blobURL);
                    $inputImage.val('');
                } else {
                    window.alert('请选择图片文件.');
                }
            }
        });
    } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
    }
});
</script>
</#assign>
<@formlayout>
<div class="row">
	<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
		<div class="widget am-cf">
			<div class="widget-body am-fr">
				<div class="am-g">
		            <div class="am-u-md-6">
		                <div class="img-container">
		                    <img id="image" alt="请选择需要上传的头像图片">
		                </div>
		            </div>
		            <div class="am-u-md-6">
		            	<h4>头像预览</h4>
		                <div class="img-preview">
		                </div>
		            </div>
		        </div>
		        <div class="am-g docs-buttons">
		            <fieldset>
		                <div class="am-form-group am-form-file">
		                    <button type="button" class="am-btn am-btn-primary am-btn-sm">
		                        <i class="am-icon-cloud-upload"></i> 选择要上传的文件
		                        <input type="file" id="inputImage" name="file" accept="image/*">
		                    </button>
		                </div>
		                <div class="am-form-group am-fr">
		                    <button type="button" class="am-btn am-btn-primary am-btn-sm js-modal-open" data-method="getCroppedCanvas">
		                        <i class="am-icon-camera"></i> 截取图像
		                    </button>
		                    <button type="button" class="am-btn am-btn-primary am-btn-sm js-modal-open" data-method="uploadAvatar">
		                        <i class="am-icon-save"></i> 保存图像
		                    </button>
		                </div>
		            </fieldset>
		        </div>
			</div>
		</div>
	</div>
</div>
</@formlayout>

